<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>卡卷列表</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/cardsEquipment.css">

   
</head>
<style>
#page{
    height:100%;
    width:100%;
    background:#F9F9F9;
}
.card{
    width:100%;
    /* height:100%; */
    margin-top:2.75rem;
    padding:.5rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card_item{
    width:49%;
    /* border:1px solid red; */
    border-radius: 5px;
    background:white;
    margin-bottom: .5rem;
}
.card_item_head{
    width:100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #DDDDDD;
    padding:.5rem;
    box-sizing: border-box;
    color: #222222;;
    font-size: 14px;
}
.first_level{
    color:#FFA800;

}
.secend_level{
    color:#FF4E00;
}
.third_level{
    color:#EC6EAD;
}
.card_item>img{
    width:100%;
    padding:.5rem .5rem 0rem;;
    height:6.5rem;
    box-sizing: border-box;
}
.addcount{
    text-align: center;
    color:#FE6566;
    font-size:20px;
    /* margin-top:-.5rem; */
}
</style>
<body>
    <div id="page">
        <div class="pageTop" style="position: fixed;top:0">
                <img src="../../images/profile/right_arrow.png" alt="" class='backArrow'>
                <span class="pageTitle" style="margin-left:17%">卡卷列表</span>
                <span class="pageinstr" style="width:4rem"></span>
        </div>
        <div class="card">
            <div class="card_item">
                <p class="card_item_head">
                    <span>美丽衣橱品牌卡</span>
                    <span class="first_level">初级</span>
                </p>
                <img src='../../images/O1CN01hPWKk61Pf7y2D1FbU_!!657171867.jpg' alt="">
                <p class="addcount">+25</p>
            </div>
            <div class="card_item">
                <p class="card_item_head">
                    <span>美丽衣橱品牌卡</span>
                    <span class="secend_level">初级</span>
                </p>
                <img src='../../images/O1CN01hPWKk61Pf7y2D1FbU_!!657171867.jpg' alt="">
                <p class="addcount">+25</p>
            </div>
            <div class="card_item">
                <p class="card_item_head">
                    <span>美丽衣橱品牌卡</span>
                    <span class="third_level">初级</span>
                </p>
                <img src='../../images/O1CN01hPWKk61Pf7y2D1FbU_!!657171867.jpg' alt="">
                <p class="addcount">+25</p>
            </div>
            <div class="card_item">
                    <p class="card_item_head">
                        <span>美丽衣橱品牌卡</span>
                        <span class="first_level">初级</span>
                    </p>
                    <img src='../../images/O1CN01hPWKk61Pf7y2D1FbU_!!657171867.jpg' alt="">
                    <p class="addcount">+25</p>
            </div>
            <div class="card_item">
                <p class="card_item_head">
                    <span>美丽衣橱品牌卡</span>
                    <span class="secend_level">初级</span>
                </p>
                <img src='../../images/O1CN01hPWKk61Pf7y2D1FbU_!!657171867.jpg' alt="">
                <p class="addcount">+25</p>
            </div>
            <div class="card_item">
                <p class="card_item_head">
                    <span>美丽衣橱品牌卡</span>
                    <span class="third_level">初级</span>
                </p>
                <img src='../../images/O1CN01hPWKk61Pf7y2D1FbU_!!657171867.jpg' alt="">
                <p class="addcount">+25</p>
            </div>

        </div>
    </div>

    <div class="mask supperMask">
            <div class="querenshiyong">
              <div class="querenshiyong_content">
                <p class="querenma" style="font-weight: bold;font-size:1.2rem;margin-bottom: 1rem">品牌卡类</p>
                <p class="instr">现在手机最流行的配色要数渐变色了，下面我们就来说说目前最流行的4种渐变色手机。
                  第一种：华为P20极光色，使用了从午夜蓝渐变到深紫的不常见配色，
                  使之无论在何种光照下看起来都非常漂亮。其颜色由深至浅层层逐渐晕开，似太空般神秘，
                  充满无尽的想象空间。
                </p>
              </div>
                <img src="../../images/zaqizaba/close.png" alt="" class="close">
            </div>
    </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../js/back.js"></script>
    
    <script>
    $(".mask").hide();
    
    $('.card_item').click((e)=>{
        e.preventDefault();
        $(".mask").show();
    })
    
    // 点击取消
    $('.close').click(()=>{
        $(".mask").hide();
    })
</script>
</body>
</html>